import React, {useEffect, useState} from 'react';
import {Button, Form, Input, Modal, Select} from 'antd';
import {queryAccount, queryStaff} from "@/services/system";


const ProcessFlowForm = (props) => {
  const {modalVisible, onCancel, title, onSubmit, data} = props;
  const [userData, setUserData] = useState([])
  const [initData, setInitData] = useState({
    processName: '',
    admStaffIds: []
  })
  const [form] = Form.useForm();
  const {Option} = Select;
  const {TextArea} = Input;

  useEffect(() => {
    queryStaff({
      pageSize: 99999,
      pageNum: 1
    }).then(res => {
      setUserData(res.result.records)
    })
  }, [])

  useEffect(() => {
    const admStaffIdsOld = data && data.admStaffIds ? data.admStaffIds.split(',').map(item => Number(item)) : [];
    // setInitData({
    //   processName: data && data.processName ? data.processName : '',
    //   admStaffIds: admStaffIdsOld
    // })
    form.setFieldsValue({
      processName: data && data.processName ? data.processName : '',
      admStaffIds: admStaffIdsOld
    })
  }, [data])

  const handelSubmit = (status) => {
    form.validateFields([
      'processName',
      'admStaffIds'
    ]).then(val => {
      onSubmit({...val})
    });
  }

  return (
    <Modal
      destroyOnClose
      title={title}
      width={800}
      visible={modalVisible}
      onCancel={() => onCancel()}
      footer={
        [

          <Button
            key="cancel" onClick={() => onCancel()}
          >
            取消
          </Button>,
          <Button key="save" type="primary" onClick={() => handelSubmit(1)}>
            提交
          </Button>
        ]}
      wrapClassName={'purchaseModal'}
    >
      <Form
        layout={'horizontal'}
        form={form}
        // initialValues={{
        //   ...initData
        // }}
      >
        <Form.Item label="工艺段" name="processName">
          <Input disabled={true}/>
        </Form.Item>
        <Form.Item label="负责人" name="admStaffIds" rules={[
          {
            required: true,
            message: '负责人是必选项'
          }
        ]}>
          <Select mode="multiple"
                  defaultActiveFirstOption={false}
                  showArrow={true}
                  filterOption={false}
                  notFoundContent={null}>
            {
              userData.map(item => {
                return <Option value={item.staffId} key={item.staffId}>{item.realName}</Option>
              })
            }
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  );
};
export default ProcessFlowForm;
